<template>
  <el-container>
    <el-header>
      <h2>新闻</h2>
    </el-header>
    <el-main>
      <el-row justify="center">
        <el-table :data="tableData" style="width: 50%">
          <el-table-column fixed prop="value.id" label="编号" width="80" />
          <el-table-column prop="value.title" label="Name" width="300" />
          <el-table-column prop="score" label="阅读量" width="120" />
          <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick(scope.row.value.id,scope.row.value.title)">
                Click
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {addVolume, queryAll} from "../api/news.js";

export default {
  name: "news",
  data(){
    return{
      tableData:[
        {
          "score": 5.0,
          "value": {
            "id": 5,
            "title": "外交部回应“特朗普威胁报复中方”"
          }
        }
      ]
    }
  },
  methods:{
    async handleClick(id,title){
      const param = {
        id:id,
        title:title,
      }
      let {data:data} = await addVolume(param)
      console.log(data)
      await this.loadData()
    },
    async loadData(){
      let{data:data} = await queryAll()
      console.log(data)
      this.tableData = data.data
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
.el-header{
  text-align: center;
}
</style>